<template>
  <div class="categoryItem">
    <NavBar routerName="Classification"></NavBar>
    <van-tabs v-model="$store.state.Classification.botherIndex" @change="changeTab">
      <van-tab v-for="item  in $store.state.Classification.brotherCategory" :key="item.id" :title="item.name">
        <div class="header">
          <p style="text-align: center; font-size: 20px;">{{ item.name }}</p>
          <p style="text-align: center; font-size: 14px; color: #aaa; margin: 10px 0px;">{{ item.desc }}</p>
        </div>
      </van-tab>
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" offset="50"  @load="onLoad">
        <van-card v-for="item in newList" :origin-price="item.counterPrice" :key="item.id" :price="item.retailPrice" :desc="item.desc"
          :title="item.name" :thumb="item.picUrl" @click="goDetail(item.id)"/>
      </van-list>
    </van-tabs>
  </div>
</template>

<script>
import NavBar from '@/components/navBar.vue'
export default {
  name: 'CategoryItem',
  components: {
    NavBar
  },
  data () {
    return {
      categoryIds: {},
      newList: [],
      finished: false,
      loading: false,
      page: 1
    }
  },
  computed: {
    list () {
      console.log(this.$store.state.Classification.list)
      return this.$store.state.Classification.list
    }
  },
  watch: {
    list: {
      deep: true,
      // immediate: true,
      handler (newValue, oldValue) {
        console.log(newValue, oldValue)
        this.newList.push(...newValue)
        console.log(111, this.page, this.$store.state.Classification.paging.pages)
        if (this.page < this.$store.state.Classification.paging.pages) {
          this.loading = false
          this.page++
        } else {
          this.finished = true
        }
        // }
      }
    }
  },
  mounted () {
    // 页面初次获取sessionStorage中的id和index
    this.categoryIds = JSON.parse(window.sessionStorage.getItem('categoryIds'))
    // 渲染头部tab栏
    this.getSessionData()
  },
  methods: {
    // 读取index和id，发送请求，，渲染头部tab栏
    getSessionData () {
      if (JSON.parse(window.sessionStorage.getItem('categoryIds'))) {
        this.$store.dispatch('Classification/getCatetoryItemData', { ...JSON.parse(window.sessionStorage.getItem('categoryIds')) })
      }
    },
    // 监听滚动发送列表请求
    onLoad () {
      this.$store.dispatch('Classification/getCategoryListData',
        { id: JSON.parse(window.sessionStorage.getItem('categoryIds')).id, page: this.page, limit: 10 })
    },
    // 点击tab项，切换数据列表
    async changeTab (index) {
      // 初始化page，newList以及id
      this.page = 1
      this.newList = []
      this.id = this.$store.state.Classification.brotherCategory[index].id
      // 将id重新加入到sessionStorage中
      window.sessionStorage.setItem('categoryIds', JSON.stringify({ id: this.id, index: index }))
      // 重新发请求渲染tab栏
      await this.getSessionData()
      // 重新load请求
      await this.onLoad()
      this.finished = false
      this.$router.replace({ name: 'CategoryItem', query: { categoryId: this.id } })
    },
    // 进入detail页面
    goDetail (id) {
      console.log(id)
      // 路由跳转进入detail页面
      this.$router.push({ name: 'Detail', params: { id } })
    }
  }
}

</script>
<style scoped lang='scss'>
</style>
